<!DOCTYPE html>
<html lang="zh_CN" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>Cherry 柠檬水</title>
    <header th:replace="header::html"></header>
    <link rel="stylesheet" th:href="@{/xadmin/css/login.css}"/>
    <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon"/>
    <style type="text/css">
        .login {
            min-height: 410px !important;
        }

        .iconcherry {
            font-size: 20px !important;
        }
    </style>
</head>
<body class="login-bg">
<div class="login layui-anim layui-anim-up">
    <div class="message" th:text="#{message.title}"></div>
    <div id="darkbannerwrap"></div>

    <form class="layui-form" id="formData">
        <input id="telephone" name="telephone" th:placeholder="#{message.telephone}"
               type="text" lay-verify="required|phone|number"
               autocomplete="off">
        <hr class="hr15">
        <input id="smsCode" name="smsCode" th:placeholder="#{message.sms}" style="width: 55%" type="text"
               lay-verify="required" autocomplete="off">
        <button id="sms" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">[[#{message.send}]]
        </button>
        <hr class="hr15">
        <input style="width: 100%;" id="smslogin" lay-submit="" lay-filter="smslogin" type="button"
               th:value="#{message.biologic}">
        <hr class="hr15">
        <div style="float: right;">
            <a href="/user-register.html">[[#{message.register}]]</a>
            <!--            <a th:href="@{smslogin.html(lang='zh_CN')}">[[#{message.chinese}]]</a>-->
            <!--            <span class="line">|</span>-->
            <!--            <a th:href="@{smslogin.html(lang='en_US')}">[[#{message.english}]]</a>-->
        </div>
        <div style="text-align: right;float: left;">
            <a href="/login.html">[[#{message.pwdLogin}]]</a>
        </div>
        <hr class="hr15">
        <div class="coagent">
            <ul>
                <li>
                    <a th:href="@{/authLogin/wechat_open}" class="pdl">
                        <i class="iconcherry icon-weixin"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/qq}" class="pdl">
                        <i class="iconcherry icon-QQ"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/weibo}" class="pdl">
                        <i class="iconcherry icon-weibo"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/alipay}" class="pdl">
                        <i class="iconcherry icon-zhifubao"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/dingtalk}" class="pdl">
                        <i class="iconcherry icon-dingding"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/gitee}" class="pdl">
                        <i class="iconcherry icon-gitee"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/github}" class="pdl">
                        <i class="iconcherry icon-github"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/baidu}" class="pdl">
                        <i class="iconcherry icon-baidu"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/huawei}" class="pdl">
                        <i class="iconcherry icon-huawei"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/aliyun}" class="pdl">
                        <i class="iconcherry icon-aliyun"></i>
                    </a>
                </li>
            </ul>
        </div>
    </form>
</div>
<script type="text/javascript">
    layui.use(['form', 'jquery', 'layer'], function () {
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer;

        //获取校验码
        $("#sms").click(sendCode);

        //发送验证码
        function sendCode() {
            var mobile = $("#telephone").val();
            if (mobile == null || mobile == '') {
                layer.msg("请输入手机号码", {icon: 2});
            } else {
                var loading = layer.load();
                $.ajax({
                    url: "/sms/code/" + mobile,
                    type: "POST",
                    dataType: "json",
                    success: function (data) {
                        if (data.Code == 'OK') {
                            //发送成功
                            layer.close(loading);
                            layer.alert("已发送验证码，请注意查收", {icon: 6});
                            checkSms();
                        } else {
                            //发送失败
                            layer.close(loading);
                            layer.msg(data.Message, {icon: 2});
                        }
                    },
                    error: function (xhr) {
                        layer.close(loading);
                        layer.msg("发送服务器异常，请联系管理员", {icon: 2});
                    }
                });
            }
            return false;
        }

        //定时处理
        function checkSms() {
            var time = 60;
            $('#sms').attr("disabled", "disabled");
            var timer = setInterval(function () {
                if (time == 0) {
                    clearInterval(timer);
                    $('#sms').html("获取验证码");
                    $('#sms').removeAttr("disabled");
                } else {
                    $('#sms').html(time + "秒后重发");
                    time--;
                }
            }, 1000);
        }

        //监听提交
        form.on('submit(smslogin)', function (data) {
            var loading = layer.load();
            $.ajax({
                url: "/sms/login",
                type: "post",
                dataType: "json",
                data: data.field,
                success: function (datas) {
                    if (datas.authenticated == true) {
                        localStorage.setItem("userId", datas.principal.id);
                        localStorage.setItem("username", datas.principal.username);
                        localStorage.setItem("nickName", datas.principal.nickname);
                        var authorities = datas.authorities;
                        var permission = [];
                        for (var i in authorities) {
                            permission.push(authorities[i].authority);
                        }
                        localStorage.setItem("permission", JSON.stringify(permission));
                        layer.close(loading);
                        layer.msg("登录成功，请稍后~~", {icon: 6, time: 500}, function () {
                            location.href = '/'
                        });
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    layer.close(loading);
                    var msg = xhr.responseText;
                    var response = JSON.parse(msg);
                    layer.msg(response.message);
                }
            });
            return false;
        });
    });
</script>
</body>
</html>